{% extends "correspondence/base.html" %}

{% block page_link %}
    <script src="../../static/correspondence/js/sent_detail.js"></script>
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
        {##sjr {#}
        {#    overflow: hidden;#}
        {#    text-overflow: ellipsis;#}
        {#    white-space: nowrap;#}
        {#    display: inline-block;#}
        {# }#}
    </style>
{% endblock %}



{% block right_content %}

    <div class="headline">
        <div style="width: 15%;height: 100%;line-height: 40px;float: left;padding-left: 1%;">
            <a href="sent.html" style="color: #0b0b0b;">
                <i class="iconfont icon-jiaoseguanli"></i>
                <span> 发件箱</span>
            </a>
        </div>
    </div>

    <div class="right-box" style="width: 100%;height: 95%;">
        <div style="height: 88%;width: 100%;overflow: auto;">
            <div style="width: 100%;padding-left: 1%;padding-right: 5%;">
                <table style="width: 100%;padding-left: 1%;padding-right: 5%;">
                    <tr>
                        <td height="24" valign="middle" style="word-break:break-all;padding:9px 8px 2px 14px;"
                            class="txt_left settingtable readmail_subject">
                            <div class="qm_left" style="padding-bottom:3px;">
                                <h3 id="mail_title" class="sub_title " style="padding-left:14px;">{{ mail_title }}</h3>
                            </div>
                            <div id="tagContainer" ck="tag" class="TagDiv TagReadmail"
                                 style="overflow:visible;margin-top:0;"></div>
                            <div class="clr"></div>
                        </td>
                    </tr>
                    <tr>
                        <td style="padding-left:14px;" class="settingtable txt_left">
                            <span class="addrtitle" style="padding-left:14px;">发&nbsp;&nbsp;件&nbsp;&nbsp;人：</span>
                            <span>
                               {{ sender_name }}&lt;{{ sender }}&gt;
                           </span>&nbsp;
                        </td>
                    </tr>

                    <tr>
                        <td style="padding-left:14px;" class="settingtable txt_left">
                            <span class="addrtitle" style="padding-left:14px;">发件时间：</span>
                            <span>
                               {{ create_time }}
                           </span>&nbsp;
                        </td>
                    </tr>

                    <tr>
                        <td style="padding-left:14px;" class="settingtable txt_left">
                            <span class="addrtitle" style="padding-left:14px;">收&nbsp;&nbsp;件&nbsp;&nbsp;人：</span>
                            <span>
                                投递成功 [<a id="click_count" href="javascript:void(0)" onclick="block_div()">查看详情</a>]
                           </span>&nbsp;
                        </td>
                    </tr>
                </table>

                <div id="sjr_table" style="width: 100%;height: 100px;overflow: auto;margin-left: 25px;border-top: #cfcfcf solid 1px;display: none;">
                    <table style="width: 100%;border: #cfcfcf solid 1px;" id="sjr">
                        <tr style="width: 100%;">
                            <td style="width: 33%;border: #cfcfcf solid 1px;">收件人</td>
                            <td style="width: 33%;border: #cfcfcf solid 1px;">发送状态</td>
                            <td style="width: 33%;border: #cfcfcf solid 1px;">发送时间</td>
                        </tr>
                    </table>
                </div>


                <hr style="margin-top: 1%;">
            </div>


            <div style="margin-top: 3%;padding-left: 2%;">
                {% autoescape off %}
                    {{ message_content }}
                {% endautoescape %}
            </div>
            <hr/>

            <br>
            <div id="file_div" style="width: 100%;padding-left: 2%;">
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script>
        var file_url = {{ file_url | safe }};
        console.log(file_url)
        var create_time = "{{ create_time | safe }}";
        var file_div = document.getElementById("file_div");
        for (var i=0; i<file_url.length; i++){
            var div_tag = document.createElement("div");
            var div_tag_1 = document.createElement("div");div_tag_1.style.fontSize='14px';div_tag_1.style.display='inline-block';div_tag_1.style.verticalAlign='top';
            if (file_url[i]["file_path"].split(".").slice(-1)[0] === "doc" || file_url[i]["file_path"].split(".").slice(-1)[0] === "docx"){
                div_tag_1.innerHTML='<img src="../../static/correspondence/img/word%20(3).png" alt="" style="width: 50px;height: 50px;">';
            }else if (file_url[i]["file_path"].split(".").slice(-1)[0] === "pdf" || file_url[i]["file_path"].split(".").slice(-1)[0] === "PDF"){
                div_tag_1.innerHTML='<img src="../../static/correspondence/img/pdf.png" alt="" style="width: 50px;height: 50px;">';
            }else if (file_url[i]["file_path"].split(".").slice(-1)[0] === "xls" || file_url[i]["file_path"].split(".").slice(-1)[0] === "xlsx"){
                div_tag_1.innerHTML='<img src="../../static/correspondence/img/Excel写入-选中.png" alt="" style="width: 50px;height: 50px;">'
            }else {
                div_tag_1.innerHTML='<img src="../../static/correspondence/img/PNG%20(1).png" alt="" style="width: 50px;height: 50px;">'
            }

            var div_tag_2 = document.createElement("div");div_tag_2.style.fontSize='0';div_tag_2.style.display='inline-block';div_tag_2.style.verticalAlign='top';div_tag_2.style.marginLeft='10px';
            var div_tag_3 = document.createElement("div");
            if (file_url[i].hasOwnProperty("pdf_path")){
                div_tag_3.innerHTML="<a style='font-size: 14px;' target='_blank' href='"+file_url[i]["pdf_path"]+"'>"+file_url[i]["file_name"]+"</a>";
             }else {
                div_tag_3.innerHTML="<a style='font-size: 14px;' href='"+file_url[i]["file_path"]+"'>"+file_url[i]["file_name"]+"</a>";
             }
            var div_tag_4 = document.createElement("div");
            div_tag_4.innerHTML="<a style='font-size: 14px;color: #0000FF;' href='"+file_url[i]["file_path"]+"'>下载附件</a>";
            div_tag_2.appendChild(div_tag_3);div_tag_2.appendChild(div_tag_4);
            div_tag.appendChild(div_tag_1);div_tag.appendChild(div_tag_2);file_div.appendChild(div_tag);
        }

        var recipient_name = "{{ recipient_name | safe }}";
        var recipient_list = recipient_name.split(",");
        var sjr = document.getElementById("sjr");
        for (var j=0; j<recipient_list.length; j++){
            var tr = document.createElement("tr");tr.style.width="100%";
            var td = document.createElement("td");var td1 = document.createElement("td");var td2 = document.createElement("td");
            td.innerHTML=recipient_list[j];td.style.width='33%';td.style.border="#cfcfcf solid 1px";
            td1.innerHTML="发送成功";td1.style.width='33%';td1.style.border="#cfcfcf solid 1px";
            td2.innerHTML=create_time;td2.style.width='33%';td2.style.border="#cfcfcf solid 1px";
            tr.appendChild(td);tr.appendChild(td1);tr.appendChild(td2);sjr.appendChild(tr);
        }

        function block_div() {
            document.getElementById("sjr_table").style.display='inline-block';
            document.getElementById("click_count").innerText="关闭";
            document.getElementById("click_count").setAttribute("onclick", 'none_div()');
        }

        function none_div() {
            document.getElementById("sjr_table").style.display='none';
            document.getElementById("click_count").innerText="查看详情";
            document.getElementById("click_count").setAttribute("onclick", 'block_div()');
        }
    </script>
{% endblock %}

